<template>
  <div class="box">
    <div class="kongbai"></div>
    <ul>
      <router-link to="/Zhanghaoziliao">
      <li>
          <a href="" >账号资料</a> <span class="one">></span>
        </li>
      </router-link>

      <li><a href="">安全隐私</a> <span class="one">></span></li>
      <li><a href="">收货信息</a> <span class="one">></span></li>
    </ul>
    <div class="kongbai"></div>
    <ul>
      <li><a href="">支付设置</a> <span class="one">></span></li>
      <li class="specli">
        <div>
          <h2>首页推荐设置</h2>
          <h3>双列/wife/免流/移动网络下自动播放</h3>
          <span class="ppp">></span>
        </div>
      </li>
      <li><a href="">播放设置</a> <span class="one">></span></li>
      <li><a href="">离线设置</a> <span class="one">></span></li>
      <li><a href="">身份认证</a> <span class="one">></span></li>
    </ul>
    <div class="kongbai"></div>
    <ul>
      <li><a href="">推送设置</a> <span class="one">></span></li>
      <li><a href="">消息设置</a> <span class="one">></span></li>
      <li><a href="">下载管理</a> <span class="one">></span></li>
      <li><a href="">清理储存空间</a> <span class="one">></span></li>
      <li><a href="">其他设置</a> <span class="one">></span></li>
    </ul>
    <div class="kongbai"></div>
    <ul>
      <li class="speclio">
        <h4></h4>
        <h2>定时提醒</h2>
        <h3>不开启</h3>
        <span class="ppp">></span>
      </li>
    </ul>
    <div class="kongbai"></div>
    <ul>
      <li><a href="">深色模式</a> <span class="one">></span></li>
    </ul>
    <div class="kongbai"></div>
    <ul>
      <li><a href="">我的客服</a> <span class="one">></span></li>
      <li><a href="">关于得物</a> <span class="one">></span></li>
      <li><a href="">商务合作</a> <span class="one">></span></li>
    </ul>
    <div class="kongbai"></div>
    <ul>
      <li><a href="">用户协议</a> <span class="one">></span></li>
      <li><a href="">用户隐私</a> <span class="one">></span></li>
      <li><a href="">隐私权限设置</a> <span class="one">></span></li>
    </ul>
    <div class="kongbai"></div>
    <ul>
      <router-link to="/DL">
      <li class="sp"><a @click="tuichu" href="">退出登录</a> <span class="two">></span></li></router-link>
    </ul>
    <div class="kongbai"></div>
  </div>
</template>
<script>
export default {
  name: "Mymain",
  data: function () {
    return {};
  },
  methods:{
    tuichu(){
      localStorage.clear();
    }
  }
};
</script>
<style scoped>
.box ul {
  width: 3.63rem;
  list-style: none;
  margin-left: 0.12rem;
}
.box ul li {
  width: 3.63rem;
  height: 0.42rem;
  border-bottom: 0.02rem solid #f4f5f6;
  position: relative;
}
.box ul li a {
  display: block;
  color: #21252c;
  width: 3.38rem;
  height: 0.42rem;
  font-size: 0.14rem;
  line-height: 0.42rem;
}
.specli,
.speclio {
  width: 3.38rem;
  height: 0.5rem;
  border-bottom: 0.02rem solid #f4f5f6;
  position: relative;
}
.speclio h4 {
  height: 0.05rem;
}
.specli div {
  height: 0.31rem;
  margin-top: 0.15rem;
}
.specli div h2,
.speclio h2 {
  font-size: 0.14rem;
  line-height: 0.16rem;
  height: 0.16rem;
}
.specli div h3,
.speclio h3 {
  font-size: 0.12rem;
  height: 0.15rem;
  margin-top: 0.03rem;
}
.sp {
  width: 3.38rem;
  height: 0.42rem;
  text-align: center;
  line-height: 0.42rem;
}
.kongbai {
  width: 3.75rem;
  height: 0.16rem;
  background-color: #f1f2f4;
}
.one {
  display: block;
  font-size: 0.25rem;
  margin-top: 0.04rem;
  color: #737981;
  position: absolute;
  top: 0;
  right: 0.1rem;
}
.two {
  display: block;
  font-size: 0.25rem;
  margin-top: 0.04rem;
  color: #737981;
  position: absolute;
  top: -0.08rem;
  right: 0.1rem;
}
.ppp {
  width: 0.2rem;
  height: 0.3rem;
  position: absolute;
  right: 0.1rem;
  top: 0;
  font-size: 0.25rem;
  color: #737981;
}
</style>